New article on extending widgets with the widget factory. #427

tjvantoll · 2013-09-16T18:09:43Z

No description provided.

tjvantoll · 2013-09-16T18:12:06Z

Ping @jzaefferer and @scottgonzalez. If you guys have some time I would appreciate a read through of this.

This is the first part of implementing jquery/api.jqueryui.com#20.

jzaefferer · 2013-09-16T18:19:39Z

page/jquery-ui/widget-factory/extending-widgets.md

+
+### Creating Widget Extensions
+
+Creating widgets with the widget factory is done by passing the name of the widget and a prototype object to `$.widget`. The following creats a "myWidget" widget in the "myNamespace" namespace.


"creats" -> "creates"

jzaefferer · 2013-09-16T18:33:29Z

When talking about widget extensions we should also mention the lack of polymorphism on the plugin bridge. While you can extend dialog with a superDialog, you can't call dialog methods through the superDialog bridge. Once you have access to the instance itself, it'll work fine.

tjvantoll · 2013-09-16T18:55:48Z

When talking about widget extensions we should also mention the lack of polymorphism on the plugin bridge. While you can extend dialog with a superDialog, you can't call dialog methods through the superDialog bridge. Once you have access to the instance itself, it'll work fine.

@jzaefferer To make sure I understand, this is what you're referring to correct?

$.widget( "my.superDialog", $.ui.dialog, {} );

var dialog = $( "<div></div>" ).superDialog();

// This works
dialog.superDialog( "close" );

// This doesn't
dialog.dialog( "close" );

jzaefferer · 2013-09-16T19:15:45Z

Yep, exactly.

tjvantoll · 2013-09-16T19:43:25Z

Thanks @jzaefferer. Updates made 878403c.

scottgonzalez · 2013-09-18T18:27:13Z

page/jquery-ui/widget-factory/extending-widgets.md

+
+### Creating Widget Extensions
+
+Creating widgets with the widget factory is done by passing the name of the widget and a prototype object to `$.widget`. The following creates a "myWidget" widget in the "myNamespace" namespace.


$.widget -> $.widget()

scottgonzalez · 2013-09-18T18:29:19Z

We should probably build on top of the existing widget factory docs. Perhaps use custom.progressbar from http://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/ instead of ui.dialog as the starting point.

scottgonzalez · 2013-09-18T18:30:28Z

page/jquery-ui/widget-factory/extending-widgets.md

+
+Here superDialog and dialog are essentially equivalent widgets with different names and namepaces. To make our new widget more interesting we can add methods to its prototype.
+
+The prototype object to use for a widget is the final argument passed to `$.widget`. To this point our examples have been using an empty object. Let's add a method to the prototype:


$.widget -> $.widget()

"To this point" -> "Up to this point" or "So far"

scottgonzalez · 2013-09-18T18:44:32Z

We should add a section about extending a widget instance for one-off customizations.

tjvantoll · 2013-09-19T12:37:37Z

@scottgonzalez I addressed all of your comments other than:

We should probably build on top of the existing widget factory docs. Perhaps use custom.progressbar from http://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/ instead of ui.dialog as the starting point.

I started down this route and it became a little messy. These are progressbar's methods:

destroy
disable
enable
option
value
widget

I had trouble building good examples based off these methods because they're ones I don't think people generally use... and I really can't see anyone wanting to override them.

I think using dialog's open() and close() are just cleaner for this article. Also you don't have to mess with the appendTo( "body" ) line over and over again.

I did change the namespace to "custom" for consistency.

Feel free to ping me about this.

scottgonzalez · 2013-09-20T17:05:25Z

page/jquery-ui/widget-factory/extending-widgets.md

+
+When we place methods on the prototype object, we are not actually overriding the original method - rather, we are placing a new method at a higher level in the prototype chain.
+
+To make the parent's methods available, the widget factory provides two methods - `_super()` and `superApply()`.


_superApply()

scottgonzalez · 2013-09-20T17:06:43Z

page/jquery-ui/widget-factory/extending-widgets.md

+
+### Using `_super()` and `_superApply()` to Access Parents
+
+The [`_super()`](http://api.jqueryui.com/jquery.widget/#method-_super) and [`_superApply()`](http://api.jqueryui.com/jquery.widget/#method-_superApply) are methods that access methods of the same same in the parent widget. Refer to the following example. Like the previous one, this example also overrides the `open()` method to log `"open"`. However, this time `_super()` is run to invoke dialog's `open()` and open the dialog.


Either drop "The" or change to something like "The _super() and _superApply() methods access methods..."

scottgonzalez · 2013-09-20T17:13:46Z

Just a few minor tweaks needed and that one sentence that I find really confusing.

tjvantoll · 2013-09-20T20:25:42Z

Landed in 4cf8c56.

New article on extending widgets with the widget factory.

153dec6

jzaefferer reviewed Sep 16, 2013
View reviewed changes

Various improvements and tweaks per review and reread.

878403c

tjvantoll mentioned this pull request Sep 17, 2013

Document non-standard public methods jquery/api.jqueryui.com#20

Closed

7 tasks

scottgonzalez reviewed Sep 18, 2013
View reviewed changes

Various edits based on feedback and another re-read.

83177ab

tjvantoll added 2 commits September 20, 2013 11:30

Link to the extending widgets article and various style updates.

7435684

Naming consistency.

e1df947

scottgonzalez reviewed Sep 20, 2013
View reviewed changes

Minor clarifications.

ae7f758

tjvantoll closed this Sep 20, 2013


		### Creating Widget Extensions

		Creating widgets with the widget factory is done by passing the name of the widget and a prototype object to `$.widget`. The following creats a "myWidget" widget in the "myNamespace" namespace.


		Here superDialog and dialog are essentially equivalent widgets with different names and namepaces. To make our new widget more interesting we can add methods to its prototype.

		The prototype object to use for a widget is the final argument passed to `$.widget`. To this point our examples have been using an empty object. Let's add a method to the prototype:


		When we place methods on the prototype object, we are not actually overriding the original method - rather, we are placing a new method at a higher level in the prototype chain.

		To make the parent's methods available, the widget factory provides two methods - `_super()` and `superApply()`.


		### Using `_super()` and `_superApply()` to Access Parents

		The [`_super()`](http://api.jqueryui.com/jquery.widget/#method-_super) and [`_superApply()`](http://api.jqueryui.com/jquery.widget/#method-_superApply) are methods that access methods of the same same in the parent widget. Refer to the following example. Like the previous one, this example also overrides the `open()` method to log `"open"`. However, this time `_super()` is run to invoke dialog's `open()` and open the dialog.

New article on extending widgets with the widget factory. #427

New article on extending widgets with the widget factory. #427

Uh oh!

Conversation

tjvantoll commented Sep 16, 2013

Uh oh!

tjvantoll commented Sep 16, 2013

Uh oh!

jzaefferer Sep 16, 2013

Choose a reason for hiding this comment

Uh oh!

jzaefferer commented Sep 16, 2013

Uh oh!

tjvantoll commented Sep 16, 2013

Uh oh!

jzaefferer commented Sep 16, 2013

Uh oh!

tjvantoll commented Sep 16, 2013

Uh oh!

scottgonzalez Sep 18, 2013

Choose a reason for hiding this comment

Uh oh!

scottgonzalez commented Sep 18, 2013

Uh oh!

scottgonzalez Sep 18, 2013

Choose a reason for hiding this comment

Uh oh!

scottgonzalez Sep 18, 2013

Choose a reason for hiding this comment

Uh oh!

scottgonzalez commented Sep 18, 2013

Uh oh!

tjvantoll commented Sep 19, 2013

Uh oh!

scottgonzalez Sep 20, 2013

Choose a reason for hiding this comment

Uh oh!

scottgonzalez Sep 20, 2013

Choose a reason for hiding this comment

Uh oh!

scottgonzalez commented Sep 20, 2013

Uh oh!

tjvantoll commented Sep 20, 2013

Uh oh!

Uh oh!